<template >
	<div class="contain-report">
		<div class="report-title"><span style="cursor: pointer" @click="goBack">实验评测</span> <span style="color: #666">/ {{title}}</span></div>
		<div class="report-name">{{title}}</div>
		<div class="report-body" v-if="topic.length !== 0">
			<div class="topic-list"  v-for="(item,index) in topic" :key="item.id">
				<template v-if="item.type ===1">
					<div class="list-title" >{{index + 1}}.{{item.name}} (单选题)</div>
					<el-radio-group  v-model="item.answer" style="display: flex;flex-flow: column nowrap;align-items: flex-start;margin-top: 10px;">
						<el-radio v-for="(item1,index1) in item.list " :key="index1" :label="item1.answer" style="margin: 5px 0">{{item1.answer}}</el-radio>
					</el-radio-group>
				</template>
				<template v-if="item.type === 2">
					<div class="list-title">{{index + 1}}.{{item.name}} (多选题)</div>
					<el-checkbox-group v-model="checkAnswer" style="display: flex;flex-flow: column nowrap;align-items: flex-start;margin-top: 10px;">
						<el-checkbox v-for="(item1,index1) in item.list " :key="index1" :label="item1.answer" name="type"></el-checkbox>
					</el-checkbox-group>
				</template>
				<template v-if="item.type === 3">
					<div class="list-title" >{{index + 1}}.{{item.name}} (判断题)</div>
					<el-radio-group  v-model="item.answer"  style="display: flex;flex-flow: column nowrap;align-items: flex-start;margin-top: 10px;">
						<el-radio v-for="(item1,index1) in item.list " :key="index1" :label="item1.answer" style="margin: 5px 0">{{item1.answer}}</el-radio>
					</el-radio-group>
				</template>
				<template v-if="item.type === 4">
					<div class="list-title" >{{index + 1}}.{{item.name}} (主观题)</div>
					<el-input style="margin-top: 10px" type="textarea" v-model="item.answer" :rows="5" placeholder="请输入内容" ></el-input>
				</template>
			</div>
		</div>
		<div v-if="topic.length === 0">
			<el-empty description="暂无数据"></el-empty>
		</div>
		<div class="report-btn">
			<el-button type="primary" size="small" v-if="topic.length !== 0" @click="answerQuestion">提 交</el-button>
		</div>
	</div>
</template >

<script >
	import {seeEvaluating ,examination } from "../../api/evaluating";

    export default {
    	name:'studentAnswer',
		data(){
    		return{
    		    id:this.$route.query.id,
				title:this.$route.query.name,
                topic:[],
                checkAnswer:[]
			}
		},
		mounted() {
    	    this.getTopic()
        },
        methods:{
    	    async getTopic(){
    	    	const { data } = await seeEvaluating(this.id)
                console.log(data)
				if (data.code === 200){
				    this.topic = data.data.data.evaContents
					for(let i = 0;i<this.topic.length;i++){
					    if (this.topic[i].type === 1 || this.topic[i].type === 2 ||this.topic[i].type === 3){
                            this.topic[i].list = JSON.parse(this.topic[i].content)
						}
					}
					// this.topic.forEach(item => {
					//     if (item.type === 1 && item.type === 2 && item.type === 3){
					//         item.list = JSON.parse(item.content)
					// 	}
					// })
                    // console.log(this.topic[0].list)
				}
			},
            goBack(){
                this.$router.go(-1)
			},
		//	提交答案
			answerQuestion(){
                // console.log(JSON.stringify(this.checkAnswer))
                // console.log(this.topic)
				let arr  = {
                    evaLogInfoVos:[],
                    evaluationId:null
				}
				arr.evaluationId = this.id
				this.topic.forEach(item => {
                    let obj = {}
				    obj.answer = item.answer
					obj.evaContentId = item.id
					if (item.type === 2 ) {
                        obj.answer =this.checkAnswer.toString()
                        obj.evaContentId = item.id
					}
                    arr.evaLogInfoVos.push(obj)
				})
                // console.log(arr)
				this.submitAnswer(arr)
			},
		//	最终提交
			async submitAnswer(arr){
    	        for (let i = 0;i < arr.evaLogInfoVos.length;i++){
    	            if (!arr.evaLogInfoVos[i].answer){
    	               return  this.$message.error('请将答案填写完整!!!')
					}
				}
    	        const { data } = await examination(arr)
                console.log(data)
				if (data.code === 200){
				    this.$message.success(data.message)
					this.$router.go(-1)
				}
			}
		}
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 20px;
			color: #333;
		}
		.report-name{
			width: 100%;
			font-size: 20px;
			color: #333;
			text-align: center;
		}
		.report-body{
			margin: 20px auto;
			width: 60%;
			padding: 10px;
			border-radius: 10px;
			box-shadow: 0 0 10px 2px rgba(255,255,255,0.1);
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #ffffff;
			.topic-list{
				margin: 10px 0;
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				.list-title{
					font-size: 16px;
					color: #333;
					text-align: center;
				}
				::v-deep .el-radio {
					.el-radio__input {
						.el-radio__inner {
							border-radius: 2px;
						}
					}
					.el-radio__input.is-checked .el-radio__inner::after {
						content: '';
						width: 8px;
						height: 3px;
						border: 2px solid white;
						border-top: transparent;
						border-right: transparent;
						text-align: center;
						display: block;
						position: absolute;
						top: 2px;
						left: 1px;
						vertical-align: middle;
						transform: rotate(-45deg);
						border-radius: 0px;
						background: none;
					}
				}
				/deep/.el-textarea__inner{
					border: none;
					background-color: #f0f0f0;
					color: #999;
				}
			}
		}
		.report-btn{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
